<template>
  <div class="goods-detail container">
    <Breadcrumb :list="categoryList" />
    <div class="row">
      <Images align="vertical" :list="imageList" />
      <!-- sku的集合 -->
      <div class="sku-content">
        <!-- 标签 -->
        <div class="tag" v-for="(tag, index) in tagList" :key="index">{{ tag.name }}</div>
        <!-- 商品名称 -->
        <h1>{{ goodsInfo.name }}</h1>
        <!-- 商品描述 -->
        <h2>{{ goodsInfo.simpleDesc }}</h2>
        <!-- 可提供的服务 -->
        <div class="mt-20">
          <Service :info="goodsInfo" :policy="policyList" />
        </div>
        <!-- sku选择 -->
        <div class="mt-20">
          <GoodsSku :list="skuSpecList" @sku-change="selectSkuSpecValueHandler" />
        </div>
        <div class="btn-group">
          <div class="btn btn-primary">立即购买</div>
          <div class="btn btn-default"><label class="iconfont icon-gouwuche1"></label>加入购物车</div>
          <div class="btn btn-empty">
            <div class="iconfont icon-shoucang"></div>
            <div class="text">收藏</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 猜你喜欢 -->
    <div class="mt-40">
      <GuessYouLike />
    </div>
    <!-- 图文详情及热销榜 -->
    <div class="mt-30">
      <div class="left">
        <!-- tab组件 -->
        <CommonTab :tabs="tabs" v-if="tabs.length > 0" @tabChange="bindTabChangeHandler" />
        <!-- 图文详情 -->
        <div v-if="activeTabcode == 'detail'"><Detail :attrs="attrs" :dom="dom" /></div>
        <!-- 评价 -->
        <div v-if="activeTabcode == 'comment'"><CommentList /></div>
        <!-- 尺码表 -->
        <div v-if="activeTabcode == 'chart'"><SizeChart /></div>
        <!-- 质检报告 -->
        <div v-if="activeTabcode == 'report'"><InspectionReport /></div>
        <div v-if="activeTabcode === 'question'"><CommonQuestion /></div>
      </div>
      <div class="right">
        <HotSale title="24小时热销榜" :goodsList="hotSaleGoods"></HotSale>
      </div>
    </div>
  </div>
</template>

<script>
import Images from '@/components/goods/Images'
import Breadcrumb from '@/components/goods/Breadcrumb'
import Service from '@/components/goods/Service'
import GoodsSku from '@/components/goods/GoodsSku'
import GuessYouLike from '@/components/GuessYouLike'
import Detail from '../components/goods/Detail'
import CommonTab from '@/components/goods/CommonTab'
import CommentList from '@/components/goods/CommentList'
import InspectionReport from '@/components/goods/InspectionReport'
import CommonQuestion from '@/components/goods/CommonQuestion'
import SizeChart from '@/components/goods/SizeChart'
import HotSale from '@/components/goods/HotSale'
import { fetchGoodsDetail } from '@/api'

// http://you.163.com/item/detail?id=3408051&_stat_referer=index&_stat_area=mod_newItem_item_3

export default {
  data () {
    return {
      // 商品信息
      goodsInfo: {},
      // 可提供的服务
      policyList: [],
      // 商品详情属性列表
      attrs: [],
      // dom对象
      dom: '',
      // 商品图片集合
      imageList: [],
      // 标签列表
      tagList: [],
      // sku属性列表
      skuSpecList: [],
      // tab项
      tabs: [],
      // 当前激活的tab
      activeTabcode: '',
      // 面包屑导航
      categoryList: [ { name: '首页', href: '/' } ],
      // 热销商品列表
      hotSaleGoods: [
        { id: 1, name: '20寸 纯PC “铝框”元素', price: 7900, canAddCart: 1, image: 'https://yanxuan.nosdn.127.net/0697d5a6cde44f345f9b8a75bd57ac8a.png?imageView&quality=95&thumbnail=250x250' },
        { id: 2, name: '22寸 纯PC “铝框”元素', price: 790, canAddCart: 1, image: 'https://yanxuan.nosdn.127.net/2265dab9e0ca3a059e5a8614cf60e0af.png?imageView&quality=95&thumbnail=250x250' },
        { id: 3, name: '24寸 纯PC “铝框”元素', price: 3200, canAddCart: 1, image: 'https://yanxuan.nosdn.127.net/79640de310cc786d2101efa5c3c6096a.png?imageView&quality=95&thumbnail=250x250' },
        { id: 4, name: '28寸 纯PC “铝框”元素', price: 2100, canAddCart: 0, image: 'https://yanxuan.nosdn.127.net/182155eb96bc5343f1e69ebed6024980.png?imageView&quality=95&thumbnail=250x250' }
      ]
    }
  },

  async created () {
    // 从接口中获取数据
    const { policyList, item, categoryList, tabs } = await fetchGoodsDetail(this.$route.params.id)
    // sku属性集合
    this.skuSpecList = this.resetSkuSpecValue(item.skuSpecList)
    // 商品信息
    this.goodsInfo = item
    // 属性列表
    this.attrs = item.attrList
    // dom字符串
    this.dom = item.itemDetail.detailHtml
    // 服务
    this.policyList = policyList
    // tab列表
    this.tabs = tabs || []
    // 设置第一个是激活的tab
    if (this.tabs.length > 0) {
      this.activeTabcode = this.tabs[0].code
    }
    // 商品图片整合在一起
    this.imageList = [
      item.primaryPicUrl,
      item.itemDetail.picUrl1,
      item.itemDetail.picUrl2,
      item.itemDetail.picUrl3,
      item.itemDetail.picUrl4
    ]
    // 标签列表
    this.tagList = item.itemTagList
    // 给组件塞值
    this.categoryList = this.categoryList.concat(categoryList)
  },

  methods: {
    /**
     * 当前选中的sku和值
     * @param { Array } sku 当前选中的sku维度
     */
    selectSkuSpecValueHandler (sku) {
      this.skuSpecList.forEach((skuItem, index1) => {
        if (index1 === sku[0]) {
          skuItem.skuSpecValueList.forEach((value, index2) => {
            // 默认不选中
            value.active = false
            // 将用户点击的选中
            if (index2 === sku[1]) {
              value.active = true
            }
          })
        }
      })
    },

    /**
     * 重置属性
     * @param { Array } list 当前属性值
     */
    resetSkuSpecValue (list) {
      list.forEach(sku => {
        sku.skuSpecValueList.forEach(value => {
          Object.assign(value, { active: false })
        })
      })
      return list
    },

    /**
     * tab改变事件
     * @param { Object } tab tab对象
     */
    bindTabChangeHandler ({ code }) {
      this.activeTabcode = code
    }
  },

  components: {
    Images,
    Breadcrumb,
    Service,
    GoodsSku,
    GuessYouLike,
    Detail,
    CommonTab,
    CommentList,
    SizeChart,
    InspectionReport,
    CommonQuestion,
    HotSale
  }
}
</script>

<style lang="less" scoped>
@import "../styles/variable.less";

.goods-detail {
  padding-bottom: 36px;
  .row {
    overflow: hidden;
    .sku-content {
      float: right;
      width: 620px;
      .tag {
        background: @font-color-golden;
        color: #ffffff;
        cursor: pointer;
        display: inline-block;
        padding: 0px 6px;
        height: 20px;
        line-height: 20px;
      }
      h1 {
        font-size: 20px;
        font-weight: 700;
        margin: 10px 0px 6px;
        line-height: 20px;
      }
      h2 {
        color: @font-color-grey;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
      }
      .btn-group {
        overflow: hidden;
        margin-top: 30px;
        .btn {
          border-radius: 2px;
          cursor: pointer;
          font-size: 18px;
          float: left;
          width: 168px;
          height: 50px;
          line-height: 48px;
          text-align: center;
          margin-right: 10px;
          .iconfont {
            font-size: 20px;
            margin-right: 10px;
          }
          &.btn-primary {
            background-color: #f5f3ef;
            border: 1px solid @font-color-golden;
            color: @font-color-golden;
          }
          &.btn-default {
            border: 1px solid @font-color-golden;
            background-color: @font-color-golden;
            color: #fff;
          }
          &.btn-empty {
            align-items: center;
            border: 1px solid #CCC;
            display: flex;
            flex-direction: column;
            width: 50px;
            justify-content: center;
            .iconfont {
              font-size: 16px;
              line-height: 16px;
              margin-right: 0px;
            }
            .text {
              color: #999999;
              font-size: 14px;
              line-height: 16px;
              margin-top: 6px;
            }
          }
        }
      }
    }
  }
  .mt-30 {
    display: flex;
    .left {
      width: 750px;
    }
    .right {
      flex: 1;
    }
  }
}
</style>
